import { login, getProfile, getuserInformition } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
export default {
  namespaced: true,
  state: {
    // 加入本地存储之后 token先从本地存储中获取 如果取不到就是undifend 所以要给一个空的字符串
    token: getToken() || '',
    // 获取用户的基本信息
    // 1.找到接口文档 找到获取用户基本信息的接口
    // 2.在api/user定义接口
    // 3在定义好的接口导入vuex 中
    // 4.在state 中定义userInfor 存储用户的基本信息
    // 5.在muations中定义方法修改userInfor
    // 6.在actions 中调用接口的获取数据 调用mutations 中的方法修改state的userInfor 变量
    // 7.找一个合适的位置调用vuex定义的actions
    userInfor: {}

  },

  // 修改state 中的变量
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token
      setToken(token)
    },
    // 清除token
    REMOVE_TOKEN(state) {
      state.token = ''
      removeToken()
    },
    SET_USERINFOR(state, userInfor) {
      state.userInfor = userInfor
    },
    // 退出登录
    removeUserInfo(state) {
      state.token = ''
      state.userInfor = {}
      removeToken()
    }
  },
  // 调用后端接口 处理异步请求操作
  // 高内聚 为了代码可读性强 提高了代码的内聚程度 将登陆接口写在vuex
  actions: {
    async fetchLogin(store, data) {
      const res = await login(data)
      store.commit('SET_TOKEN', res.data)
      // console.log(res)
    },
    async fetchUserInfor(store) {
      // {data:data1} 解构赋值的重命名
      // 用户基本信息
      const { data: data1 } = await getProfile()
      // 获取角色头像信息等
      const { data: data2 } = await getuserInformition(data1.userId)
      store.commit('SET_USERINFOR', { ...data1, ...data2 })
      console.log({ ...data1, ...data2 })
      return data1
    }

  }
}
